<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style>
			.box{
				display: inline-block;
				padding: 10px 20px;
				border: 1px solid #8a8a8a;
				cursor:pointer;
			}
			.active{
				background-color: #8a8a8a;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- <div :class="className" @click="handleClick">按钮</div> -->
			
			<!-- 当页面中没有显示得数据,Vue控制台不再刷新页面，但结构中的值发生了变化 -->
			<div @click="handleClick">按钮</div>
			<!-- 事件中可以定义简单的语句 -->
			<!-- <div @click="clicked = !clicked">按钮</div> -->
		</div>
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return {
					clicked:false
				}
			},
			methods:{
				handleClick(){
					this.clicked = !this.clicked
				}
			},
			computed:{
				className(){
					return this.clicked ? "box active" : "box"
				}
			}
		})
	</script>
</html>